import React from 'react'
import { Flex, FlexItem } from 'react-weui'
import SelectPopup from './ProductSelectPopup'

export default class ProductTabBar extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			bottom_show: false,
			role: null
		}
		this.handleHide = this.handleHide.bind(this)
	}
	handleHide() {
		this.setState({
			bottom_show: false
		})
	}
	render() {
		const style = {
			background: '#fff',
		    height: '50px',
		    textAlign: 'center',
		    color: '#fff',
		    position: 'fixed',
		    bottom: 0,
		    width: '100%'
		};
		const fontStyle = {
			fontSize: '0.6em'
		};
		return (
			<div>
				<Flex style={style}>
					<FlexItem  style={{ paddingTop: '8px',color: 'gray'}}>
						<Flex>
						    <FlexItem>
						        <div className="iconfont icon-atm"></div>
						        <p style={fontStyle}>客服</p>
						    </FlexItem>
						    <FlexItem>
						        <div className="iconfont icon-skip"></div>
						        <p style={fontStyle}>分享</p>
						    </FlexItem>
						    <FlexItem>
						        <div className="iconfont icon-favorite"></div>
	                            <p style={fontStyle}>收藏</p>
						    </FlexItem>
					    </Flex>
					</FlexItem>
					<FlexItem style={{
						background: 'orange', paddingTop: '12px'
					}} onClick={e => {this.setState({ bottom_show: true, role: 0 })}}>
					    加入购物车
				 	</FlexItem>
					<FlexItem style={{
						background: 'red',
						paddingTop: '12px'
					}} onClick={e => {this.setState({ bottom_show: true, role: 1 })}}>
					   立即购买
					 </FlexItem>
			    </Flex>
			    <SelectPopup 
			    	goodData={this.props.goodData}
			    	bottomShow={this.state.bottom_show} 
			    	handleHide={this.handleHide} 
			    	isBar={true} 
			    	role={this.state.role} 
                	isAdded={this.props.isAdded}
                	shoppingCartActions={this.props.shoppingCartActions}
                	goodsId={this.props.goodsId}
                	storeId={this.props.storeId}
			    />
         	</div>
		);
	}
}
